<template>
  <div>
    <el-card style="min-width: 1200px">
      <el-row class="box">
        <el-col :span="8">
          <el-input
            clearable
            v-model="commandForm.realName"
            placeholder="请输入成员姓名"
          ></el-input>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-button type="primary" class="width120" @click="()=>{
               this.bodyForm=JSON.parse(JSON.stringify(this.commandForm));
               this.getDataList()
              }"
            >查询</el-button
          >
        </el-col>
        <el-col :span="3" :offset="9">
          <el-button
            type="primary"
            style="width: 10vw; min-width: 120px"
            @click="addUser()"
            >添加成员</el-button
          >
        </el-col>
      </el-row>
      <el-table :data="dataList">
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <!-- <el-table-column show-overflow-tooltip type="index" align="center" label="序号">
        </el-table-column> -->
        <el-table-column
          show-overflow-tooltip
          prop="headUrl"
          align="center"
          label="头像"
        >
          <template slot-scope="scope">
            <el-avatar
              v-if="scope.row.headUrl"
              :src="getImgUrl(scope.row.headUrl)"
            ></el-avatar>
            <el-avatar
              v-else
              :src="require('@/assets/imgs/geren/info3.png')"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="realName"
          align="center"
          label="姓名"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.realName ? scope.row.realName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="username" align="center" label="邮箱">
          <template slot-scope="scope">
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              {{ scope.row.username ? scope.row.username : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="mobile" align="center" label="手机号">
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.mobile ? scope.row.mobile : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="roleName"
          align="center"
          label="角色"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.roleName ? scope.row.roleName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="act"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="!['sub_admin', 'main_admin'].includes(scope.row.userType)"
              @click="handleEdit(scope.row.id)"
              type="text"
              >修改</el-button
            >
            <el-button
              v-if="!['sub_admin', 'main_admin'].includes(scope.row.userType)"
              type="text"
              @click="deleteUser(scope.row.id)"
              >删除</el-button
            >
            <el-button
              v-if="!['sub_admin', 'main_admin'].includes(scope.row.userType)"
              @click="handlePassword(scope.row.id)"
              type="text"
              >重置密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      layout="prev, pager, next, sizes, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @current-change="pageCurrentChangeHandle"
      @size-change="pageSizeChangeHandle"
    >
    </el-pagination>
    <codeDialogVue
      codeId="3"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import codeDialogVue from "@/components/codeDialog.vue";
import mixin from "@/mixins/mixin";
import crypto from "@/crypto";

export default {
  name: "settingUserManagement",
  components: {
    codeDialogVue,
  },
  mixins: [mixin],
  data() {
    return {
      codeItem: "",
      codeType: "",
      codeDialog: false,
      mixinViewModuleOptions: {
        getDataListURL: "/sys/user/pageAppUser",
        createdIsNeed:false,
      },
      dataList: [],
      commandForm: {
        realName: "",
        appId: this.$store.state.appId,
      },
    };
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if(this.$route.name==this.$options.name){
          this.getDataList();
        }
      },
    },
    deep: true,
  },
  created(){
    this.bodyForm=JSON.parse(JSON.stringify(this.commandForm))
    this.getDataList()
  },
  methods: {
    codeStateFn(val) {
      if (val) {
        if (this.codeType == "SMS_BUSINESS_DELETE_USER") {
          this.deleteUser(this.codeItem);
        } else {
          this.addUser();
        }
      }
    },
    goCode(val, item) {
      this.codeType = val;
      this.codeItem = item;
      this.codeDialog = true;
    },
    getImgUrl(id) {
      return window.location.origin + `/merchantApi/oss/view?id=${id}`;
    },
    addUser() {
      this.$router.push("/setting/createUser");
    },
    handleEdit(id) {
      this.$router.push({ name: "settingCreateUser", query: { id } });
    },
    handlePassword(userId){
      this.$http.post('/sys/user/passwordReset', {userId}
      ).then(res => {
        if (res.code === '0000') {
          this.$message.success('密码重置成功,已复制密码！')
          this.copyAppId(crypto.get(res.data))
          this.query()
        }
      })
    },
    copyAppId(value) {
      const input = document.createElement("input"); // 创建input对象
      input.value = value; // 设置复制内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input); // 删除临时实例
    },
    deleteUser(id) {
      this
          .$confirm("确定删除该成员?", "提示", {
            customClass: "confirm",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            showClose: false,
            closeOnClickModal: false,
            closeOnPressEscape: false,
            type: "warning",
            center: true,
          })
          .then(() => {
            this.$http
        .post(
          `/sys/user/delete`,
          {
            id,
            appId: this.$store.state.appId,
          }
        )
        .then((res) => {
          if (res.code === "0000") {
            this.$message.success("删除成功！");
            if (Number.isInteger((this.total - 1) / this.pageSize)) {
              this.pageNum = (this.total - 1) / this.pageSize;
              if (this.pageNum == 0) {
                this.pageNum = 1;
              }
            }
            this.query();
          }
        });
          });
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  margin-top: 10px;
  margin-bottom: 30px;
}
</style>
